import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getDocName, createTaskpane, newDoc, addString, closeDoc, setDemoSpan, openWeb } from '../actions/dialog';
import './dialog.css';
import axios from 'axios'
import { parseHTML } from 'jquery';
import dataParse from '../reducers/parseData';

class Dialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    axios.get('/.debugTemp/NotifyDemoUrl').then((res) => {
      const { setDemoSpan } = this.props;
      setDemoSpan(res.data);
    });
  }

  onDocNameClick = () => {
    const { getDocName } = this.props;
    getDocName();
  }

  onCreateTaskpane = () => {
    const { createTaskpane } = this.props;
    createTaskpane();
  }

  onCreateDoc = () => {
    const { newDoc } = this.props;
    newDoc();
  }

  onAddString = () => {
    const { addString } = this.props;
    addString();
  }

  onCloseDoc = () => {
    const { closeDoc } = this.props;
    closeDoc();
  }

  onOpenWeb = () => {
    const { openWeb } = this.props;
    openWeb();
  }

  render() {
    const { docName, demoSpan } = this.props;
    const getData = () => {
      return axios({
        url: "http://localhost:3000/wordata"
      })
    }
    return (
      <div>
        <div className="divItem">
          这是一个网页，按<span className="debug">"F12"</span>可以打开调试器。
        </div>
        <div className="divItem">
          这个示例展示了wps加载项的相关基础能力，与B/S业务系统的交互，请用浏览器打开：
          <span className="docs" onClick={this.onOpenWeb}>{demoSpan}</span>
        </div>
        <div className="divItem">开发文档: <span className="docs">https://open.wps.cn/docs/office</span></div>
        <div>
          <button onClick={this.onDocNameClick}>取文件名</button>
          <button onClick={this.onCreateTaskpane}>创建任务窗格</button>
          <button onClick={this.onCreateDoc}>新建文件</button>
          <button onClick={this.onAddString}>文档开头添加字符串</button>
          <button onClick={this.onCloseDoc}>关闭文件</button>

          <button onClick={async () => {

            let result = await getData()
            
            console.log(result);
            for (let key in result.data.fields_richtext) {
              console.log(key);
       //       console.log(result.data.fields_richtext[key]);
              //  insertData(key, result.data.fields_richtext[key])
            }
            let data = parseHTML(result.data.fields_richtext["基础资产情况及现金流预测分析"])
            console.log(data);
            let mydata = dataParse(data)
            console.log(mydata);
            // let content = []
            // data.forEach(item => {

            //   if (item.children == undefined) {
            //     return false
            //   }
            //   if (!item.children.length) {
            //     if (item.innerText) {
            //       content.push(item.innerText)
            //     }
            //   }
            //   else {

            //     for (let index = 0; index < item.children.length; index++) {
            //       content.push(item.children[index].innerText)
            //     }

            //   }
            // })

          }}>点击获取数据</button>
        </div>

        <hr />
        <div>文档文件名为：<span>{docName}</span></div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    docName: state.dialog.get('docName'),
    demoSpan: state.dialog.get('demoSpan'),
  }
}

export default connect(mapStateToProps, {
  getDocName,
  createTaskpane,
  newDoc,
  addString,
  closeDoc,
  setDemoSpan,
  openWeb
})(Dialog);
